const path = require('path');

// 对html文件的编译
const htmlWebpackPlugin = require('html-webpack-plugin');
const {cleanWebpackPlugin} = require('clean-webpack-plugin');
// webpack配置信息
module.exports = {
    // 入口文件
    entry: "./src/index.ts",
    // 打包文件所在目录
    output:{
        path: path.resolve(__dirname, "dist"),
        filename:'bundle.js',
        environment: {
            arrowFunction: false,
            const: false
        }
    },
    mode: 'development',
    // 指定webpack打包时要使用的模块
    module:{
        // 指定loder的规则
        rules:[
            {
                // 指定规则生效的文件
                test: /\.ts$/,
                use: [
                    {
                        loader:'babel-loader',
                        options:{
                            presets:[
                                [
                                    '@babel/preset-env',
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":88,
                                            "ie":11
                                        },
                                        // 指定core-js的版本
                                        "corejs":"3",
                                        // 使用core-js的方式  按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],   // 使用的依赖
                exclude: /node-modules/  // 排除不需要处理的文件
            },
            {
                // 指定设置less文件的处理
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 引入postcss-loader
                    // {
                    //     loader:'postcss-loader',
                    //     options:{
                    //         postcssOptions:{
                    //             plugins:[
                    //                [ 
                    //                     'postcss-preset-env'
                    //                     // {
                    //                     //     browsers: 'last 2 versions'
                    //                     // }
                    //                 ]
                    //             ]
                    //         }
                    //     }
                    // },
                    'less-loader'
                ],   // 使用的依赖
                exclude: /node-modules/  // 排除不需要处理的文件
            }
        ]

    },
    plugins:[
        new htmlWebpackPlugin({
            // 配置生成文件的title
            // title:"snack",
            // 生成html文件的模板
            template:"./src/index.html"
        })
    ],
    // 用来设置引用模块
    resolve:{
        extensions:['.ts','.js']
    }
}

